<template>
	<view class="page-height">
		<i-header></i-header>
		<view class="page-content">
			<view class="framer-19uc1ny" :class="{'view-show' : show}">
				<view class="header-Text">
					<view class="upper-Text">
						<!-- Automata 2.0 -->
						<span>{{i18n_t('Automata2.0')}}</span>
						<!-- Proof of Machinehood -->
						<p>{{i18n_t('upper_text_02')}}</p>
					</view>
					<!-- Modular Attestation -->
					<h1>{{i18n_t('header_h1')}}</h1>
					<!-- The first attestation layer extending machine-level trust to Ethereum -->
					<p class="framer-text">{{i18n_t('header_p1')}}</p>
					<!-- Learn more -->
					<text class="more-text">{{i18n_t('header_text1')}}</text>
				</view>
				<!-- 代币分配图表 -->
				<view class="charts-view">
					<view class="tit-col">
						<!-- Token allocation -->
						<h3>{{i18n_t('Token_allocation')}}</h3>
						<!-- Total amount of tokens -->
						<span>{{i18n_t('Token_span')}}:1000000.000</span>
					</view>
					<view class="charts-line">
						<view class="data-charts">
							<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
						</view>
						<view class="text-col">
							<!-- ATA Carnival Phase 2.0 -->
							<p>{{i18n_t('chart_01')}}</p>
							<!-- Total allocation of ecological construction -->
							<p>{{i18n_t('chart_02')}}:100000</p>
							<!-- Current allocated amount -->
							<p>{{i18n_t('chart_03')}}:100000</p>
						</view>

					</view>
					<view class="legend-list">
						<view class="legend-item" v-for="(item,index) in chartData.series[0].data" :key="index">
							<view class="line">
								<i></i>
								<p class="u-line-1">{{item.name}}</p>
							</view>
							<span>{{item.value}}</span>
						</view>
					</view>
				</view>

				<view class="framer-zzyqcu-wrap">
					<view class="framer-zzyqcu">
						<!-- Automata is now Automata 2.0 -->
						<h2>{{i18n_t('zzyqcu_title')}}</h2>
						<!-- Automata 2.0 is a modular attestation layer with attestation conducted fully on-chain for
							out-of-protocol computation. This forms the basis for Proof of Machinehood, with security
							guarantees provided by the hardware silicon-based trust, which extends upwards through the
							entire Web3 stack.  -->
						<p>{{i18n_t('zzyqcu_p1')}} </p>

						<view class="list">
							<view class="scroll-list">
								<!-- Restaking primitives -->
								<span>{{i18n_t('zzyqcu_s1')}}</span>
								<!-- Proof of Machinehood -->
								<span>{{i18n_t('zzyqcu_s2')}}</span>
								<!-- Modular trust -->
								<span>{{i18n_t('zzyqcu_s3')}}</span>
								<!-- Optimistic Attestation -->
								<span>{{i18n_t('zzyqcu_s4')}}</span>
								<!-- Optimistic Rolliups -->
								<span>{{i18n_t('zzyqcu_s5')}}</span>
								<!-- AltLayer -->
								<span>{{i18n_t('zzyqcu_s6')}}</span>
								<!-- Zero-knowledge Proofs -->
								<span>{{i18n_t('zzyqcu_s7')}}</span>
								<!-- Fraud proofs -->
								<span>{{i18n_t('zzyqcu_s8')}}</span>
								<!-- AppChain -->
								<span>{{i18n_t('zzyqcu_s9')}}</span>
								<!-- Modular attestation -->
								<span>{{i18n_t('zzyqcu_s10')}}</span>
								<!-- Restaking primitives -->
								<span>{{i18n_t('zzyqcu_s1')}}</span>
								<!-- Proof of Machinehood -->
								<span>{{i18n_t('zzyqcu_s2')}}</span>
								<!-- Modular trust -->
								<span>{{i18n_t('zzyqcu_s3')}}</span>
								<!-- Optimistic Attestation -->
								<span>{{i18n_t('zzyqcu_s4')}}</span>
								<!-- Optimistic Rolliups -->
								<span>{{i18n_t('zzyqcu_s5')}}</span>
								<!-- AltLayer -->
								<span>{{i18n_t('zzyqcu_s6')}}</span>
								<!-- Zero-knowledge Proofs -->
								<span>{{i18n_t('zzyqcu_s7')}}</span>
								<!-- Fraud proofs -->
								<span>{{i18n_t('zzyqcu_s8')}}</span>
								<!-- AppChain -->
								<span>{{i18n_t('zzyqcu_s9')}}</span>
								<!-- Modular attestation -->
								<span>{{i18n_t('zzyqcu_s10')}}</span>
							</view>

						</view>
					</view>
				</view>



			</view>

			<view class="framer-g2f7sm" :class="{'view-show' : show}">
				<view class="framer-ee9ol8">
					<view class="item-title">
						<!-- Automata 2.0 -->
						<span>{{i18n_t('Automata2.0')}}</span>
						<!-- Our reason for being -->
						<p>{{i18n_t('being')}}</p>
					</view>
					<view class="top-view">
						<!-- But first, attest -->
						<h2>{{i18n_t('But_first_attest')}}</h2>
						<!-- Even in Web3, trust can be fragile.  -->
						<p style="margin-top: 0;">{{i18n_t('ee9ol8_p1')}}</p>
						<!-- That's where Proof of Machinehood comes in. Putting hardware attestations on-chain makes it
							possible to establish the authenticity and uniqueness of machines involved in computation. -->
						<p>{{i18n_t('ee9ol8_p2')}}</p>
						<!-- The application-specific rollup transforms Web3 into a decentralized, open network that
							anyone can transparently audit and interact with. -->
						<p>{{i18n_t('ee9ol8_p3')}} </p>
					</view>
					<view class="title-line">
						<!-- Join the new paradigm -->
						<span>{{i18n_t('Join_the_new_paradigm')}}</span>
						<image src="../static/images/more.svg" mode=""></image>
					</view>
					<view class="list">
						<view class="item" :class="{'view-show' : scrollTop > 300}">
							<image src="@/static/images/ioc01.svg" class="ioc"></image>
							<!-- Modular trust  -->
							<h3>{{i18n_t('Modular_trust')}} </h3>
							<!-- On-chain verifications signal trust  -->
							<p style="margin-top: 0;">{{i18n_t('Modular_trust_01')}} </p>
							<!-- Automata 2.0 is not tied down to any one blockchain framework. Modular attestations go
								beyond the constraints of siloed ecosystems to improve the performance, developer
								experience and auditability for Web3 as a an open platform. -->
							<p>{{i18n_t('Modular_trust_02')}}</p>
						</view>
						<view class="item" :class="{'view-show' : scrollTop > 540}">
							<image src="@/static/images/ioc02.svg" class="ioc"></image>
							<!-- Optimistic rollups -->
							<h3>{{i18n_t('Optimistic_rollups')}}</h3>
							<!-- An extension of the Ethereum way of work. -->
							<p style="margin-top: 0;">{{i18n_t('Optimistic_rollups_p1')}}</p>
							<!-- Optimistic Attestation allows anyone to submit and verify attestations in a
								permissionless manner. Its modular framework works intuitively with blockchain
								ecosystems to open up the design space for Web3 applications. This includes our work
								with  -->
							<!-- AltLayer -->
							<!--  a leading Rollups-as-a-Service-provider. -->
							<p>{{i18n_t('Optimistic_rollups_p2')}}<span>{{i18n_t('Optimistic_rollups_p3')}}</span>,
								{{i18n_t('Optimistic_rollups_p4')}}
							</p>
						</view>
						<view class="item" :class="{'view-show' : scrollTop > 910}">
							<image src="@/static/images/ioc03.svg" class="ioc"></image>
							<!-- Zero knowledge proofs -->
							<h3>{{i18n_t('Zero_knowledge_proofs')}}</h3>
							<!-- A privacy-preserving, shared notion of truth. -->
							<p style="margin-top: 0;">{{i18n_t('Zero_knowledge_proofs_p1')}}</p>
							<!-- Zero-knowledge proofs (ZKPs) are useful for confirming the validity of computation
								without knowing its input, whilst remaining on-chain and fully auditable. ZKPs also
								scale compute-restrained networks with its deft handling of complex cryptographic
								primitives.  -->
							<p>{{i18n_t('Zero_knowledge_proofs_p2')}}</p>
						</view>

					</view>
				</view>
			</view>
			<view class="framer-1pc3lmt" :class="{'view-show' : scrollTop > 1364}">
				<view class="framer-m48qx3">
					<view class="item-title">
						<!-- Automata 2.0 -->
						<span>{{i18n_t('Automata2.0')}}</span>
						<!-- Web3 enters a new age -->
						<p>{{i18n_t('Web3_enters_a_new')}}</p>
					</view>
					<!-- The modular attestation layer extending machine-level trust to Ethereum, and Web3 -->
					<h1>{{i18n_t('Web3_enters_a_new_h1')}}</h1>
					<!-- Proof of Machinehood proves the uniqueness and inherent value of machines without the need for
						excessive computation or capital. Trust is enforced by the silicon-based hardware, which makes
						it extraordinarily resistant to both sybil attacks and spoofing attempts.  -->
					<p>{{i18n_t('Web3_enters_a_new_p1')}}</p>
					<image src="../static/images/Zb2JpMdPH1ALZzutTzYjBxOXEHg.png"></image>
				</view>
			</view>

			<view class="framer-iiyzo1" :class="{'view-show' : scrollTop > 2080}">
				<view class="framer-1rmm75i">
					<view class="item-title">
						<!-- Automata 2.0 -->
						<span>{{i18n_t('Automata2.0')}}</span>
						<!-- Real-world use cases -->
						<p>{{i18n_t('Real_world_use_cases')}}</p>
					</view>
					<view class="top-view">
						<!-- We are already shipping -->
						<h1>{{i18n_t('Real_world_use_cases_h1')}}</h1>
						<!-- Modular attestation is not theoretical. Contribute to a open, adaptable Web3 with
							machine-level trust. -->
						<p>{{i18n_t('Real_world_use_cases_p1')}}</p>
					</view>
					<view class="list">
						<view class="item">
							<image src="@/static/images/ioc04.svg" class="ioc"></image>
							<view class="rig">
								<!-- Proof of Machinehood  -->
								<h3>{{i18n_t('Proof_of_Machinehood')}}</h3>
								<!-- PoM illustrates how machine attestations can be proved on-chain. Since verifications
									cannot be altered and their provenance is auditable, a number of compelling use
									cases become possible. -->
								<p>{{i18n_t('Proof_of_Machinehood_p1')}}</p>
							</view>
						</view>
						<view class="item">
							<image src="@/static/images/ioc05.svg" class="ioc"></image>
							<view class="rig">
								<!-- PPrivate RPC relay -->
								<h3>{{i18n_t('PPrivate_RPC_relay')}}</h3>
								<!-- 1RPC is a free RPC relay that shields users from metadata exposure and leakage. Its
									enclave infrastructure runs on the cloud and is backed by attestations ensuring
									hardware integrity. -->
								<p>{{i18n_t('PPrivate_RPC_relay_p1')}}</p>
							</view>
						</view>
						<view class="item">
							<image src="@/static/images/ioc07.svg" class="ioc"></image>
							<view class="rig">
								<!-- Private RPC relay -->
								<h3>{{i18n_t('Private_RPC_relay')}}</h3>
								<!-- 1RPC is a free RPC relay that shields users from metadata exposure and leakage. Its
									enclave infrastructure runs on the cloud and is backed by attestations ensuring
									hardware integrity. -->
								<p>{{i18n_t('Private_RPC_relay_p1')}}</p>
							</view>
						</view>
						<view class="item">
							<image src="@/static/images/ioc08.svg" class="ioc"></image>
							<view class="rig">
								<!-- PPrivate Block Building -->
								<h3>{{i18n_t('PPrivate_Block_Building')}}</h3>
								<!-- Remote attestations on the block builder hosted inside Intel SGX verifies if user
									transactions are protected within its encrypted enclave environment. Transaction
									confidentiality is secured. -->
								<p>{{i18n_t('PPrivate_Block_Building_p1')}}</p>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="framer-1gehdm3">
				<view class="framer-1qh9re7">
					<view class="item-title">
						<!-- Automata 2.0 -->
						<span>{{i18n_t('Automata2.0')}}</span>
						<!-- The building goes on -->
						<p>{{i18n_t('The_building_goes_on')}}</p>
					</view>
					<view class="top-view">
						<!-- Plug into our ecosystem -->
						<h1>{{i18n_t('Plug_into_our_ecosystem')}}</h1>
						<!-- Automata is collaborating and constantly evolving. -->
						<p>{{i18n_t('Plug_into_our_ecosystem_p1')}}</p>
					</view>

					<view class="list">
						<view class="item">
							<!-- We're a part of -->
							<text class="title-text">{{i18n_t('We_re_a_part_of')}} </text>
							<view class="scroll_box">
								<view class="img-list img-list-01">
									<image src="@/static/images/img01-item01.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item02.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item03.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item04.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item05.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item06.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item01.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item02.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item03.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item04.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item05.png" mode="heightFix"></image>
									<image src="@/static/images/img01-item06.png" mode="heightFix"></image>
								</view>
							</view>

						</view>
						<view class="item">
							<!-- We are backed by -->
							<text class="title-text">{{i18n_t('We_are_backed_by')}} </text>
							<view class="scroll_box">
								<view class="img-list img-list-02">
									<image src="@/static/images/img02-item01.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item02.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item03.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item04.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item05.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item06.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item01.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item02.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item03.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item04.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item05.png" mode="heightFix"></image>
									<image src="@/static/images/img02-item06.png" mode="heightFix"></image>
								</view>
							</view>

						</view>
						<view class="item">
							<!-- We are listed on -->
							<text class="title-text">{{i18n_t('We_are_listed_on')}} </text>
							<view class="scroll_box">
								<view class="img-list img-list-03">
									<image src="@/static/images/img03-item01.png" mode="heightFix"></image>
									<image src="@/static/images/img03-item02.png" mode="heightFix"></image>
									<image src="@/static/images/img03-item03.png" mode="heightFix"></image>
									<image src="@/static/images/img03-item01.png" mode="heightFix"></image>
									<image src="@/static/images/img03-item02.png" mode="heightFix"></image>
									<image src="@/static/images/img03-item03.png" mode="heightFix"></image>

								</view>
							</view>

						</view>
					</view>
				</view>
			</view>

			<view class="footer-view">
				<view class="list-group">
					<view class="list-group-item">
						<!-- Automata -->
						<span>{{i18n_t('Automata')}}</span>
						<view class="list">
							<!-- Overview -->
							<p>{{i18n_t('Overview')}}</p>
							<!-- Media Kit -->
							<p>{{i18n_t('Media_Kit')}}</p>
							<!-- Careers -->
							<p>{{i18n_t('Careers')}}</p>
							<!-- Documentation -->
							<p>{{i18n_t('Documentation')}}</p>
						</view>
					</view>
					<view class="list-group-item">
						<!-- User -->
						<span>{{i18n_t('User')}}</span>
						<view class="list">
							<!-- 1RPC -->
							<p>{{i18n_t('_1RPC')}}</p>
							<!-- Carrier -->
							<p>{{i18n_t('Carrier')}}</p>
						</view>
					</view>
					<view class="list-group-item">
						<!-- Developer -->
						<span>{{i18n_t('Developer')}}</span>
						<view class="list">
							<!-- L2Faucet -->
							<p>{{i18n_t('L2Faucet')}}</p>
							<!-- Testnet Explorer -->
							<p>{{i18n_t('Testnet_Explorer')}}</p>
							<!-- Testnet Bridge -->
							<p>{{i18n_t('Testnet_Bridge')}}</p>
						</view>
					</view>
					<view class="list-group-item">
						<!-- Connect -->
						<span>{{i18n_t('Connect')}}</span>
						<view class="list">
							<!-- Blog -->
							<p>{{i18n_t('Blog')}}</p>
							<!-- X (Twitter) -->
							<p>{{i18n_t('X_Twitter')}}</p>
							<!-- Telegram -->
							<p>{{i18n_t('Telegram')}}</p>
							<!-- Newsletter -->
							<p>{{i18n_t('Newsletter')}}</p>
							<!-- Discord -->
							<p>{{i18n_t('Discord')}}</p>
							<!-- Github -->
							<p>{{i18n_t('Github')}}</p>
						</view>
					</view>
				</view>
				<view class="letter-view">
					<!-- Newsletter -->
					<span>{{i18n_t('Newsletter')}}</span>
					<!-- The best of Automata content, news and announcements -->
					<p>{{i18n_t('Newsletter_p1')}}</p>
				</view>

				<view class="input-view">
					<view class="input-bg">
						<input type="text" placeholder="name@gmail.com" />
						<span>→</span>
					</view>
				</view>
				<view class="fot-col">
					<view class="ioc-line">
						<image src="@/static/images/footer-ioc01.png" class="ioc"></image>
						<image src="@/static/images/footer-ioc02.png" class="ioc"></image>
						<image src="@/static/images/footer-ioc03.png" class="ioc"></image>
						<image src="@/static/images/footer-ioc04.png" class="ioc"></image>
					</view>
					<!-- Privacy Policy · © 2023 Automata Network -->
					<p>{{i18n_t('footer_text')}}</p>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		checkTransaction,
		contractTransfer
	} from "@/common/chainApi.js"
	export default {
		data() {
			return {
				show: false,
				scrollTop: 0,
				chartData: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#6414b5", "#9e4ae0", "#c086f6", "#ff5a08", "#ff9315", "#fbc614", "#fade3f", "#FC8452",
						"#fc9561"
					],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
					},
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							ringWidth: 40,
							centerColor: "#000000",
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					},
				}

			}
		},

		onReady() {
			this.getServerData();
		},
		onPageScroll(e) {
			if (this.scrollTop < e.scrollTop) this.scrollTop = e.scrollTop
		},
		mounted() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})
			setTimeout(() => {
				this.show = true
			}, 500)
		},

		methods: {
			getServerData() {
				this.api.post("test").then((res) => {
					//模拟服务器返回数据L，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res_data = {
						series: [{
							data: [{
								"name": "基金会",
								"value": 300
							}, {
								"name": "生态系统和开..",
								"value": 30
							}, {
								"name": "团队",
								"value": 30
							}, {
								"name": "战略轮",
								"value": 30
							}, {
								"name": "战略合作伴和...",
								"value": 30
							}, {
								"name": "种子轮",
								"value": 30
							}, {
								"name": "币安Launchpool",
								"value": 30
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res_data));
					console.log(1111, this.chartData);
				}).catch(err => {
					this.apiErr(err)
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page-height {
		background-size: 100% auto;
		background-color: #000000;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		background: url("@/static/images/page-bg.png") top center no-repeat;
		background-size: 100% auto;
		padding: 160rpx 0rpx 0;
	}

	.framer-19uc1ny {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		padding-top: 80rpx;
		opacity: 0;
		transition: opacity 1s;

		.header-Text {
			display: flex;
			flex-direction: column;
			align-items: center;

			.upper-Text {
				display: flex;
				align-items: center;
				border-radius: 100px;
				height: 64rpx;
				padding: 10rpx;
				border: 1px solid #ff5a1f;
				color: rgb(224, 102, 18);
				font-size: 26rpx;

				span {
					background-color: rgba(255, 106, 0, .2);
					display: flex;
					align-items: center;
					height: 48rpx;
					border-radius: 100px;
					padding: 0 16rpx;
				}

			}

			h1 {
				color: #ffffff;
				font-size: 80rpx;
				text-align: center;
				padding: 20rpx 0;
				width: 550rpx;
			}

			.framer-text {
				color: #ffffff;
				text-align: center;
				width: 550rpx;
				font-size: 28rpx;

			}

			.more-text {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(187, 85, 14, 0.8);
				height: 72rpx;
				border-radius: 100px;
				line-height: 0;
				padding: 0 20rpx;
				font-size: 24rpx;
				color: #ffffff;
				margin-top: 10rpx;
			}
		}

		.charts-view {
			display: flex;
			flex-direction: column;
			padding: 30rpx 40rpx;

			.tit-col {
				display: flex;
				flex-direction: column;

				h3 {
					color: #ffffff;
					font-size: 40rpx;
				}

				span {
					color: #ffffff;
					font-size: 30rpx;
					margin-top: 10rpx;
				}
			}

			.charts-line {
				display: flex;
				align-items: center;

				.data-charts {
					width: 340rpx;
					height: 340rpx;
				}

				.text-col {
					flex: 1;
					display: flex;
					flex-direction: column;
					color: #ffffff;
					font-size: 32rpx;

					p {
						line-height: 40rpx;
						padding: 4rpx 0;
					}
				}

			}

			.legend-list {
				display: flex;
				flex-wrap: wrap;

				.legend-item {
					display: flex;
					flex-direction: column;
					width: 33.33%;
					margin-top: 30rpx;

					.line {
						display: flex;
						align-items: center;

						i {
							display: block;
							width: 10rpx;
							height: 10rpx;
							background-color: #bb550e;
							margin-right: 10rpx;
						}

						p {
							color: #ffffff;
							font-size: 30rpx;
						}
					}

					span {
						color: rgba(255, 255, 255, 0.75);
						font-size: 26rpx;
						margin-top: 10rpx;
						padding-left: 20rpx;
					}
				}

				.legend-item:nth-child(1n) .line i {
					background: #6414b5;
				}

				.legend-item:nth-child(2n) .line i {
					background: #9e4ae0;
				}

				.legend-item:nth-child(3n) .line i {
					background: #c086f6;
				}

				.legend-item:nth-child(4n) .line i {
					background: #ff5a08;
				}

				.legend-item:nth-child(5n) .line i {
					background: #ff9315;
				}

				.legend-item:nth-child(6n) .line i {
					background: #fbc614;
				}

				.legend-item:nth-child(7n) .line i {
					background: #fade3f;
				}

				.legend-item:nth-child(8n) .line i {
					background: #FC8452;
				}
			}
		}

		.framer-zzyqcu-wrap {
			padding: 0 30rpx;
			margin-top: 50rpx;


			.framer-zzyqcu {
				display: flex;
				flex-direction: column;
				padding: 48rpx;
				background: linear-gradient(130deg, rgba(224, 102, 18, 0.5) 0%, rgba(232, 80, 33, 0) 101.143%);
				border-radius: 16rpx;

				h2 {
					color: #ffffff;
				}

				p {
					color: rgba(255, 255, 255, 0.75);
					font-size: 28rpx;
				}

				.list {
					display: flex;
					align-items: center;
					margin-top: 80rpx;
					-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);

					.scroll-list {
						display: flex;
						align-items: center;
						animation: scroll00 100s infinite linear;
					}

					/* 动画 */
					@keyframes scroll00 {
						0% {
							transform: translateX(0);
						}

						100% {
							transform: translateX(-4394rpx);
						}
					}

					span {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 48rpx;
						line-height: 0;
						font-size: 26rpx;
						color: rgb(255, 151, 82);
						background: rgba(255, 106, 0, 0.2);
						border: 1px solid rgb(232, 80, 33);
						border-radius: 100px;
						padding: 0 10rpx;
					}
				}
			}
		}

	}

	.framer-g2f7sm {
		position: relative;
		z-index: 2;
		display: flex;
		padding: 100rpx 48rpx 80rpx;
		opacity: 0;
		transition: opacity 1s;

		.framer-ee9ol8 {
			display: flex;
			flex-direction: column;
			width: 100%;

			.top-view {
				display: flex;
				flex-direction: column;

				h2 {
					color: #ffffff;
					font-size: 72rpx;
				}

				p {
					color: #ffffff;
					margin-top: 30rpx;
				}
			}

			.title-line {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				span {
					color: rgb(187, 85, 14);
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.list {
				display: flex;
				flex-direction: column;
				padding-top: 20rpx;

				.item {
					display: flex;
					flex-direction: column;
					border: 1px solid rgba(255, 255, 255, .1);
					background: linear-gradient(59deg, rgba(224, 102, 18, .15) 0%, rgba(224, 102, 18, 0) 100%);
					border-radius: 32rpx;
					padding: 40rpx;
					margin-bottom: 40rpx;
					opacity: 0;
					transition: opacity 1s;


					.ioc {
						height: 80rpx;
						width: 80rpx;
					}

					h3 {
						color: #ffffff;
						margin-top: 30rpx;
						font-size: 46rpx;
					}

					p {
						color: rgba(255, 255, 255, 0.66);
						margin-top: 60rpx;
						font-size: 32rpx;
						word-break: break-all;

						span {
							color: #bb550e;
						}
					}

				}
			}

		}
	}

	.item-title {
		display: flex;
		align-items: center;
		border-radius: 100px;
		height: 64rpx;
		padding: 10rpx;
		border: 1px solid #ff5a1f;
		color: rgb(224, 102, 18);
		font-size: 26rpx;
		margin-right: auto;

		span {
			background-color: rgba(255, 106, 0, .2);
			display: flex;
			align-items: center;
			height: 48rpx;
			border-radius: 100px;
			padding: 0 16rpx;
		}

		p {
			margin: 0 !important;
		}

	}

	.framer-1pc3lmt {
		position: relative;
		z-index: 2;
		display: flex;
		padding: 100rpx 48rpx 80rpx;
		opacity: 0;
		transition: opacity 1s;


		.framer-m48qx3 {
			display: flex;
			flex-direction: column;
			width: 100%;

			h1 {
				font-size: 80rpx;
				color: #ffffff;
			}

			p {
				color: rgba(255, 255, 255, 0.75);
				font-size: 32rpx;
				margin-top: 20rpx;
			}

			image {
				width: 100%;
				height: 220rpx;
				margin-top: 200rpx;
			}
		}

	}

	.framer-iiyzo1 {
		position: relative;
		z-index: 2;
		display: flex;
		padding: 100rpx 48rpx 80rpx;
		opacity: 0;
		transition: opacity 1s;

		.framer-1rmm75i {
			display: flex;
			flex-direction: column;
			width: 100%;

			.top-view {
				display: flex;
				flex-direction: column;

				h1 {
					color: #ffffff;
					font-size: 80rpx;
				}

				p {
					color: rgba(255, 255, 255, 0.75);
					font-size: 32rpx;
					margin-top: 20rpx;
				}
			}

			.list {
				display: flex;
				flex-direction: column;
				padding-top: 20rpx;

				.item {
					display: flex;
					border: 1px solid rgba(255, 255, 255, .1);
					background: linear-gradient(59deg, rgba(224, 102, 18, .15) 0%, rgba(224, 102, 18, 0) 100%);
					border-radius: 32rpx;
					padding: 40rpx;
					margin-bottom: 40rpx;

					.ioc {
						height: 80rpx;
						width: 80rpx;
						margin-right: 20rpx;
					}

					.rig {
						display: flex;
						flex-direction: column;
						flex: 1;

						h3 {
							color: #ffffff;
							font-size: 46rpx;
						}

						p {
							color: rgba(255, 255, 255, 0.66);
							font-size: 32rpx;
							word-break: break-all;

							span {
								color: #bb550e;
							}
						}
					}



				}
			}
		}
	}

	.framer-1gehdm3 {
		position: relative;
		z-index: 2;
		display: flex;
		padding: 100rpx 48rpx 80rpx;
		background: linear-gradient(0deg, rgba(224, 102, 18, .2) 0%, rgba(171, 171, 171, 0) 100%);

		.framer-1qh9re7 {
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		.top-view {
			display: flex;
			flex-direction: column;

			h1 {
				color: #ffffff;
				font-size: 80rpx;
			}

			p {
				color: rgba(255, 255, 255, 0.75);
				font-size: 32rpx;
				margin-top: 20rpx;
			}
		}

		.list {
			display: flex;
			flex-direction: column;

			.item {
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;

				.title-text {
					color: rgb(187, 85, 14);
					font-size: 32rpx;
				}


				.scroll_box {
					overflow: hidden;
				}

				.img-list {
					display: flex;
					align-items: center;

					padding: 10rpx 0;

					image {
						height: 100rpx;
						color: #ffffff;
						margin-right: 10rpx;
					}
				}

				.img-list-01 {
					animation: scroll01 22s infinite linear;
				}

				/* 动画 */
				@keyframes scroll01 {
					0% {
						transform: translateX(0);
					}

					100% {
						transform: translateX(-2200rpx);
					}
				}

				.img-list-02 {
					animation: scroll02 16s infinite linear;
				}

				/* 动画 */
				@keyframes scroll02 {
					0% {
						transform: translateX(0);
					}

					100% {
						transform: translateX(-1580rpx);
					}
				}

				.img-list-03 {
					animation: scroll03 15s infinite linear;
				}

				/* 动画 */
				@keyframes scroll03 {
					0% {
						transform: translateX(0);
					}

					100% {
						transform: translateX(-1464rpx);
					}
				}
			}
		}
	}

	.footer-view {
		display: flex;
		flex-direction: column;
		background-color: rgb(15, 15, 15);
		padding: 48rpx 48rpx 0;

		.list-group {
			display: flex;
			flex-wrap: wrap;

			.list-group-item {
				width: 34%;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				span {
					color: #ffffff;
					font-size: 30rpx;
				}

				.list {
					display: flex;
					flex-direction: column;

					p {
						color: rgba(255, 255, 255, 0.5);
					}
				}
			}
		}

		.letter-view {
			display: flex;
			flex-direction: column;

			span {
				color: #ffffff;
				font-size: 30rpx;
			}

			p {
				color: rgba(255, 255, 255, 0.5);
			}

		}

		.input-view {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);

			.input-bg {
				background: rgb(28, 28, 28);
				border-radius: 10rpx;
				width: 100%;
				display: flex;
				align-items: center;
				height: 104rpx;
				padding: 0 30rpx;

				input {
					flex: 1;
					color: #ffffff;
				}

				span {
					color: rgb(187, 85, 14);
					;
				}
			}
		}

		.fot-col {
			display: flex;
			flex-direction: column;
			padding: 80rpx 0 50rpx;

			.ioc-line {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}
			}

			p {
				font-size: 28rpx;
				color: rgb(153, 153, 153);
				margin-top: 10rpx;
			}
		}
	}

	.view-show {
		opacity: 1 !important;
	}
</style>